<template>
  <div class="seller">
    <div class="container" ref="charts">


    </div>
  </div>
</template>



<script lang="ts" setup>
import { onMounted, onUnmounted, Ref, ref } from 'vue'
import useEcartrsData from '@/store/useEchartsData'
import * as echarts from 'echarts'



//获取options配置函数
const getOptions = () => {
  let start = (store.seller.nowPage - 1) * defaultShow
  //截取结束位置
  let end = store.seller.nowPage * defaultShow
  //每次显示的数据
  let showList = store.seller.sellerList.slice(start, end)

  //标题字体大小
  const container = document.querySelector('.container') as HTMLElement
  const titleSize = container.offsetWidth / 100 * 3.6
  const option = {
    title: {
      text: '|商家销量数据',
      textStyle: {
        fontSize: titleSize,
      },
      top: 10,
      left: 10,
    },

    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',

      }
    },

    //图表位置
    grid: {
      top: '15%',
      left: '3%',
      right: '6%',
      bottom: '3%',
      containLabel: true,
      //触发效果

    },
    xAxis: {
      type: 'value',

    },
    yAxis: {
      type: 'category',
      data: showList.map(item => item.name)
    },
    series: [
      {
        type: 'bar',
        data: showList.map(item => item.value),
        barWidth: 55,
        //文本控制
        label: {
          show: true,
        },
        //柱子样式
        itemStyle: {
          borderRadius: [0, 33, 33, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#5052ee'
            },
            {
              offset: 1,
              color: '#ab6ee5'
            }
          ])
        }
      }
    ]
  };

  initEcharts(option)
}

//获取容器 渲染标图
const initEcharts = (option: any) => {

  if (mychart) {
    mychart.dispose()
  }

  mychart = echarts.init(document.querySelector('.container') as HTMLElement, 'dark-blue')

  mychart.on('mouseover', () => {
    clearInterval(timer)
  })
  mychart.on('mouseout', () => startInterval())

  mychart.setOption(option)
  //开启自增
}
//自动增加页数函数
const startInterval = () => {
  timer = setInterval(() => {
    // /边界判断
    store.seller.nowPage++


    if (store.seller.nowPage > store.seller.countPage) store.seller.nowPage = 1
  }, 3000)
}

//图表自适应函数
const resizeEcharts = () => {
  const container = document.querySelector('.container') as HTMLElement
  //标题字体大小
  const titleSize = container.offsetWidth / 100 * 3.6
  const option = {
    title: {

      textStyle: {
        fontSize: titleSize,
      },

    },
  }
  mychart.setOption(option)
  mychart.resize()
}

onMounted(async () => {
  // /获取商品销售数据
  try {
    await store.getSellerData()
  } catch (error) {
    console.log(error);
  }

  getOptions()
  startInterval()
  //监听窗口尺寸变化
  window.addEventListener('resize', resizeEcharts)
  resizeEcharts()
})
// 销毁组件
onUnmounted(() => {//清除定时器
  console.log('我调用了');

  clearInterval(timer)
})
// 数据仓库
const store = useEcartrsData()
const defaultShow = 5//总页数

//当前页数

let timer: any = null
//容器
let mychart: any


//监听state变化 实时调用获取图标配置
store.$subscribe((mutation, state) => {
  //获取新的模板
  getOptions()
})

</script>

<style lang="less" scoped>
.seller {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>